JavaScript Promise Combinators: Avancerade asynkrona mönster för globala applikationer

Asynkron programmering är en hörnsten i modern JavaScript, särskilt när man bygger webbapplikationer som interagerar med API:er, databaser eller utför tidskrävande operationer. JavaScript Promises erbjuder en kraftfull abstraktion för att hantera asynkrona operationer, men för att bemästra dem krävs förståelse för avancerade mönster. Denna artikel fördjupar sig i JavaScript Promise combinators – Promise.all, Promise.allSettled, Promise.race och Promise.any – och hur de kan användas för att skapa effektiva och robusta asynkrona arbetsflöden, särskilt i kontexten av globala applikationer med varierande nätverksförhållanden och datakällor.

Förståelse för Promises: En snabb sammanfattning

Innan vi dyker in i combinators, låt oss snabbt repetera Promises. Ett Promise representerar det slutgiltiga resultatet av en asynkron operation. Det kan befinna sig i ett av tre tillstånd:

• Pending: Det initiala tillståndet, varken uppfyllt eller avvisat.
• Fulfilled: Operationen slutfördes framgångsrikt, med ett resulterande värde.
• Rejected: Operationen misslyckades, med en anledning (vanligtvis ett Error-objekt).

Promises erbjuder ett renare och mer hanterbart sätt att hantera asynkrona operationer jämfört med traditionella callbacks. De förbättrar kodens läsbarhet och förenklar felhantering. Avgörande är att de också utgör grunden för de Promise combinators vi ska utforska.

Promise Combinators: Orkestrering av asynkrona operationer

Promise combinators är statiska metoder på Promise-objektet som låter dig hantera och koordinera flera Promises. De tillhandahåller kraftfulla verktyg för att bygga komplexa asynkrona arbetsflöden. Låt oss granska var och en i detalj.

Promise.all(): Exekvera Promises parallellt och aggregera resultat

Promise.all() tar en itererbar samling (vanligtvis en array) av Promises som indata och returnerar ett enda Promise. Detta returnerade Promise uppfylls när alla indata-Promises har uppfyllts. Om något av indata-Promises avvisas, avvisas det returnerade Promise omedelbart med anledningen från det första avvisade Promise.

Användningsfall: När du behöver hämta data från flera API:er samtidigt och bearbeta de kombinerade resultaten är Promise.all() idealiskt. Föreställ dig till exempel att du bygger en instrumentpanel som visar väderinformation från olika städer runt om i världen. Varje stads data kan hämtas via ett separat API-anrop.

            async function fetchWeatherData(city) {
  try {
    const response = await fetch(`https://api.example.com/weather?city=${city}`); // Ersätt med en riktig API-slutpunkt
    if (!response.ok) {
      throw new Error(`Kunde inte hämta väderdata för ${city}`);
    }
    return await response.json();
  } catch (error) {
    console.error(`Fel vid hämtning av väderdata för ${city}: ${error}`);
    throw error; // Kasta om felet så att det fångas av Promise.all
  }
}

async function displayWeatherData() {
  const cities = ['London', 'Tokyo', 'New York', 'Sydney'];
  try {
    const weatherDataPromises = cities.map(city => fetchWeatherData(city));
    const weatherData = await Promise.all(weatherDataPromises);

    weatherData.forEach((data, index) => {
      console.log(`Väder i ${cities[index]}:`, data);
      // Uppdatera gränssnittet med väderdata
    });
  } catch (error) {
    console.error('Kunde inte hämta väderdata för alla städer:', error);
    // Visa ett felmeddelande för användaren
  }
}

displayWeatherData();

            

              
                Copy
              
            
          

Att tänka på för globala applikationer:

• Nätverkslatens: Förfrågningar till olika API:er på olika geografiska platser kan uppleva varierande latens. Promise.all() garanterar inte i vilken ordning Promises uppfylls, bara att de alla uppfylls (eller att ett avvisas) innan det kombinerade Promise avgörs.
• API-hastighetsbegränsning: Om du gör flera anrop till samma API eller flera API:er med delade hastighetsbegränsningar kan du överskrida dessa gränser. Implementera strategier som att köa förfrågningar eller använda exponentiell backoff för att hantera hastighetsbegränsningar på ett smidigt sätt.
• Felhantering: Kom ihåg att om något Promise avvisas, misslyckas hela Promise.all()-operationen. Detta kanske inte är önskvärt om du vill visa partiell data även om vissa förfrågningar misslyckas. Överväg att använda Promise.allSettled() i sådana fall (förklaras nedan).

Promise.allSettled(): Hantera framgång och misslyckande individuellt

Promise.allSettled() liknar Promise.all(), men med en avgörande skillnad: den väntar på att alla indata-Promises ska avgöras, oavsett om de uppfylls eller avvisas. Det returnerade Promise uppfylls alltid med en array av objekt, där varje objekt beskriver resultatet av motsvarande indata-Promise. Varje objekt har en status-egenskap (antingen "fulfilled" eller "rejected") och en value- (om uppfyllt) eller reason- (om avvisat) egenskap.

Användningsfall: När du behöver samla in resultat från flera asynkrona operationer, och det är acceptabelt att vissa misslyckas utan att hela operationen misslyckas, är Promise.allSettled() det bättre valet. Föreställ dig ett system som bearbetar betalningar via flera betalningsgateways. Du kanske vill försöka genomföra alla betalningar och registrera vilka som lyckades och vilka som misslyckades.

            async function processPayment(paymentGateway, amount) {
  try {
    const response = await paymentGateway.process(amount); // Ersätt med en riktig betalningsgateway-integration
    if (response.status === 'success') {
      return { status: 'fulfilled', value: `Betalning bearbetad framgångsrikt via ${paymentGateway.name}` };
    } else {
      throw new Error(`Betalning misslyckades via ${paymentGateway.name}: ${response.message}`);
    }
  } catch (error) {
    return { status: 'rejected', reason: `Betalning misslyckades via ${paymentGateway.name}: ${error.message}` };
  }
}

async function processMultiplePayments(paymentGateways, amount) {
  const paymentPromises = paymentGateways.map(gateway => processPayment(gateway, amount));
  const results = await Promise.allSettled(paymentPromises);

  results.forEach((result, index) => {
    if (result.status === 'fulfilled') {
      console.log(result.value);
    } else {
      console.error(result.reason);
    }
  });

  // Analysera resultaten för att avgöra övergripande framgång/misslyckande
  const successfulPayments = results.filter(result => result.status === 'fulfilled').length;
  const failedPayments = results.filter(result => result.status === 'rejected').length;

  console.log(`Lyckade betalningar: ${successfulPayments}`);
  console.log(`Misslyckade betalningar: ${failedPayments}`);
}

// Exempel på betalningsgateways
const paymentGateways = [
  { name: 'PayPal', process: (amount) => Promise.resolve({ status: 'success', message: 'Betalning lyckad' }) },
  { name: 'Stripe', process: (amount) => Promise.reject({ status: 'error', message: 'Otillräckliga medel' }) },
  { name: 'Worldpay', process: (amount) => Promise.resolve({ status: 'success', message: 'Betalning lyckad' }) },
];

processMultiplePayments(paymentGateways, 100);

            

              
                Copy
              
            
          

Att tänka på för globala applikationer:

• Robusthet: Promise.allSettled() förbättrar robustheten i dina applikationer genom att säkerställa att alla asynkrona operationer försöks, även om vissa misslyckas. Detta är särskilt viktigt i distribuerade system där fel är vanliga.
• Detaljerad rapportering: Resultat-arrayen ger detaljerad information om varje operations utfall, vilket gör att du kan logga fel, försöka misslyckade operationer på nytt eller ge användarna specifik feedback.
• Partiell framgång: Du kan enkelt avgöra den totala framgångsgraden och vidta lämpliga åtgärder baserat på antalet lyckade och misslyckade operationer. Du kan till exempel erbjuda alternativa betalningsmetoder om den primära gatewayen misslyckas.

Promise.race(): Välja det snabbaste resultatet

Promise.race() tar också en itererbar samling av Promises som indata och returnerar ett enda Promise. Till skillnad från Promise.all() och Promise.allSettled() avgörs dock Promise.race() så snart något av indata-Promises avgörs (antingen uppfylls eller avvisas). Det returnerade Promise uppfylls eller avvisas med värdet eller anledningen från det första avgjorda Promise.

Användningsfall: När du behöver välja det snabbaste svaret från flera källor är Promise.race() ett bra val. Föreställ dig att du frågar flera servrar efter samma data och använder det första svaret du får. Detta kan förbättra prestanda och responsivitet, särskilt i situationer där vissa servrar kan vara tillfälligt otillgängliga eller långsammare än andra.

            async function fetchDataFromServer(serverURL) {
  try {
    const response = await fetch(serverURL, {signal: AbortSignal.timeout(5000)}); //Lägg till en tidsgräns på 5 sekunder
    if (!response.ok) {
      throw new Error(`Kunde inte hämta data från ${serverURL}`);
    }
    return await response.json();
  } catch (error) {
    console.error(`Fel vid hämtning av data från ${serverURL}: ${error}`);
    throw error;
  }
}

async function getFastestResponse() {
  const serverURLs = [
    'https://server1.example.com/data',  // Ersätt med riktiga server-URL:er
    'https://server2.example.com/data',
    'https://server3.example.com/data',
  ];

  try {
    const dataPromises = serverURLs.map(serverURL => fetchDataFromServer(serverURL));
    const fastestData = await Promise.race(dataPromises);

    console.log('Snabbaste data mottagen:', fastestData);
    // Använd den snabbaste datan
  } catch (error) {
    console.error('Kunde inte hämta data från någon server:', error);
    // Hantera felet
  }
}

getFastestResponse();

            

              
                Copy
              
            
          

Att tänka på för globala applikationer:

• Tidsgränser: Det är avgörande att implementera tidsgränser när du använder Promise.race() för att förhindra att det returnerade Promise väntar på obestämd tid om några av indata-Promises aldrig avgörs. Exemplet ovan använder `AbortSignal.timeout()` för att uppnå detta.
• Nätverksförhållanden: Den snabbaste servern kan variera beroende på användarens geografiska plats och nätverksförhållanden. Överväg att använda ett Content Delivery Network (CDN) för att distribuera ditt innehåll och förbättra prestandan för användare runt om i världen.
• Felhantering: Om det Promise som 'vinner' racet avvisas, avvisas hela Promise.race. Se till att varje Promise har lämplig felhantering för att förhindra oväntade avvisningar. Om det 'vinnande' Promise avvisas på grund av en tidsgräns (som visas ovan), kommer de andra Promises att fortsätta exekveras i bakgrunden. Du kan behöva lägga till logik för att avbryta dessa andra Promises med `AbortController` om de inte längre behövs.

Promise.any(): Acceptera den första uppfyllelsen

Promise.any() liknar Promise.race(), men med ett något annorlunda beteende. Den väntar på att det första indata-Promise ska uppfyllas. Om alla indata-Promises avvisas, avvisas Promise.any() med ett AggregateError som innehåller en array med anledningarna till avvisningarna.

Användningsfall: När du behöver hämta data från flera källor och du bara bryr dig om det första framgångsrika resultatet är Promise.any() ett bra val. Detta är användbart när du har redundanta datakällor или alternativa API:er som ger samma information. Den prioriterar framgång över hastighet, eftersom den väntar på den första uppfyllelsen, även om vissa Promises avvisas snabbt.

            async function fetchDataFromSource(sourceURL) {
  try {
    const response = await fetch(sourceURL);
    if (!response.ok) {
      throw new Error(`Kunde inte hämta data från ${sourceURL}`);
    }
    return await response.json();
  } catch (error) {
    console.error(`Fel vid hämtning av data från ${sourceURL}: ${error}`);
    throw error;
  }
}

async function getFirstSuccessfulData() {
  const dataSources = [
    'https://source1.example.com/data', // Ersätt med riktiga datakällors URL:er
    'https://source2.example.com/data',
    'https://source3.example.com/data',
  ];

  try {
    const dataPromises = dataSources.map(sourceURL => fetchDataFromSource(sourceURL));
    const data = await Promise.any(dataPromises);

    console.log('Första framgångsrika data mottagen:', data);
    // Använd den framgångsrika datan
  } catch (error) {
    if (error instanceof AggregateError) {
      console.error('Kunde inte hämta data från någon källa:', error.errors);
      // Hantera felet
    } else {
      console.error('Ett oväntat fel inträffade:', error);
    }
  }
}

getFirstSuccessfulData();

            

              
                Copy
              
            
          

Att tänka på för globala applikationer:

• Redundans: Promise.any() är särskilt användbart när man hanterar redundanta datakällor som ger liknande information. Om en källa är otillgänglig eller långsam kan du lita på att de andra tillhandahåller datan.
• Felhantering: Se till att hantera det AggregateError som kastas när alla indata-Promises avvisas. Detta fel innehåller en array med de individuella anledningarna till avvisningarna, vilket gör att du kan felsöka och diagnostisera problemen.
• Prioritering: Ordningen i vilken du tillhandahåller Promises till Promise.any() spelar roll. Placera de mest pålitliga eller snabbaste datakällorna först för att öka sannolikheten för ett framgångsrikt resultat.

Att välja rätt combinator: En sammanfattning

Här är en snabb sammanfattning som hjälper dig att välja lämplig Promise combinator för dina behov:

• Promise.all(): Använd när du behöver att alla Promises uppfylls framgångsrikt, och du vill misslyckas omedelbart om något Promise avvisas.
• Promise.allSettled(): Använd när du vill vänta på att alla Promises ska avgöras, oavsett framgång eller misslyckande, och du behöver detaljerad information om varje utfall.
• Promise.race(): Använd när du vill välja det snabbaste resultatet från flera Promises, och du bara bryr dig om det första som avgörs.
• Promise.any(): Använd när du vill acceptera det första framgångsrika resultatet från flera Promises, och det inte gör något om vissa Promises avvisas.

Avancerade mönster och bästa praxis

Utöver den grundläggande användningen av Promise combinators finns det flera avancerade mönster och bästa praxis att ha i åtanke:

Begränsa samtidighet

När du hanterar ett stort antal Promises kan exekvering av dem alla parallellt överbelasta ditt system eller överskrida API-hastighetsbegränsningar. Du kan begränsa samtidigheten med hjälp av tekniker som:

• Chunking (Uppdelning i bitar): Dela upp Promises i mindre bitar och bearbeta varje bit sekventiellt.
• Använda en semafor: Implementera en semafor för att kontrollera antalet samtidiga operationer.

Här är ett exempel med chunking:

            async function processInChunks(promises, chunkSize) {
  const results = [];
  for (let i = 0; i < promises.length; i += chunkSize) {
    const chunk = promises.slice(i, i + chunkSize);
    const chunkResults = await Promise.all(chunk);
    results.push(...chunkResults);
  }
  return results;
}

// Exempelanvändning
const myPromises = [...Array(100)].map((_, i) => Promise.resolve(i)); //Skapa 100 promises

processInChunks(myPromises, 10) // Bearbeta 10 promises åt gången
  .then(results => console.log('Alla promises har lösts:', results));

            

              
                Copy
              
            
          

Hantera fel på ett elegant sätt

Korrekt felhantering är avgörande när man arbetar med Promises. Använd try...catch-block för att fånga fel som kan uppstå under asynkrona operationer. Överväg att använda bibliotek som p-retry eller retry för att automatiskt försöka misslyckade operationer på nytt.

            async function fetchDataWithRetry(url, retries = 3) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`HTTP-fel! status: ${response.status}`);
    }
    return await response.json();
  } catch (error) {
    if (retries > 0) {
      console.log(`Försöker igen om 1 sekund... (Försök kvar: ${retries})`);
      await new Promise(resolve => setTimeout(resolve, 1000)); // Vänta 1 sekund
      return fetchDataWithRetry(url, retries - 1);
    } else {
      console.error('Max antal försök nådda. Operationen misslyckades.');
      throw error;
    }
  }
}

            

              
                Copy
              
            
          

Använda Async/Await

async och await ger ett mer synkront liknande sätt att arbeta med Promises. De kan avsevärt förbättra kodens läsbarhet och underhållbarhet.

Kom ihåg att använda try...catch-block runt await-uttryck för att hantera potentiella fel.

Avbrytande

I vissa scenarier kan du behöva avbryta väntande Promises, särskilt när du hanterar långvariga operationer eller användarinitierade åtgärder. Du kan använda AbortController-API:et för att signalera att ett Promise ska avbrytas.

            const controller = new AbortController();
const signal = controller.signal;

async function fetchDataWithCancellation(url) {
  try {
    const response = await fetch(url, { signal });
    if (!response.ok) {
      throw new Error(`HTTP-fel! status: ${response.status}`);
    }
    return await response.json();
  } catch (error) {
    if (error.name === 'AbortError') {
      console.log('Fetch avbröts');
    } else {
      console.error('Fel vid hämtning av data:', error);
    }
    throw error;
  }
}

fetchDataWithCancellation('https://api.example.com/data')
  .then(data => console.log('Data mottagen:', data))
  .catch(error => console.error('Fetch misslyckades:', error));

// Avbryt fetch-operationen efter 5 sekunder
setTimeout(() => {
  controller.abort();
}, 5000);

            

              
                Copy
              
            
          

Slutsats

JavaScript Promise combinators är kraftfulla verktyg för att bygga robusta och effektiva asynkrona applikationer. Genom att förstå nyanserna i Promise.all, Promise.allSettled, Promise.race och Promise.any kan du orkestrera komplexa asynkrona arbetsflöden, hantera fel på ett elegant sätt och optimera prestanda. När man utvecklar globala applikationer är det avgörande att ta hänsyn till nätverkslatens, API-hastighetsbegränsningar och datakällors tillförlitlighet. Genom att tillämpa de mönster och bästa praxis som diskuteras i denna artikel kan du skapa JavaScript-applikationer som är både prestandastarka och motståndskraftiga, och som levererar en överlägsen användarupplevelse till användare runt om i världen.